import HotArticle from '@/components/HotArticle';
import Layouts from '@/components/Layout';
import { Card, Typography } from 'antd';
import React, { useEffect, useState } from 'react';
import './index.less';
import { getBlogDetail, getBlogList } from '@/service/api/blog';
import { useParams, history } from 'umi';
import { BlogList } from '@/types/blog';
const BlogDetail: React.FC = () => {
  const params: { id: string } = useParams();
  const [detialData, setDetailData] = useState<BlogList | null>(null);
  const [hotBlogList, setHotBlogList] = useState<BlogList[]>([]);
  const getBlogDetailData = async () => {
    const { data }: { data: BlogList } = await getBlogDetail({
      id: Number(params.id),
    });
    setDetailData(data);
  };
  useEffect(() => {
    // 如果详情id不能转成数字的话就证明是用户在路径随便输入的字符串
    if (!isNaN(Number(params.id))) {
      getBlogDetailData();
      getBlogList({
        pageNum: 1,
        pageSize: 5,
        isHot: 1,
      }).then(({ rows }: { rows: BlogList[] }) => {
        setHotBlogList(rows);
      });
    } else {
      history.push('/404');
    }
  }, []);
  return (
    <Layouts>
      <div className="blog_detail_wrapper">
        <div className="left_800">
          <Typography.Title level={3} style={{ textAlign: 'center' }}>
            {detialData?.title}
          </Typography.Title>
          <div className="b_info">
            <span>{detialData?.createTime}</span>
            <span>作者：{detialData?.user.nickName}</span>
          </div>
          <div
            className="b_content"
            dangerouslySetInnerHTML={{ __html: detialData?.content as string }}
          ></div>
        </div>
        <div className="right_360">
          <Card title="热门的帖子">
            {hotBlogList.map((item) => (
              <HotArticle
                key={item.id}
                id={item.id}
                title={item.title}
                imgUrl={item.imgUrl}
              ></HotArticle>
            ))}
          </Card>
        </div>
      </div>
    </Layouts>
  );
};

export default BlogDetail;
